<template>
  <div class="resetpassword">
    <div class="progress">
      <van-row type="flex" justify="space-around">
        <van-col span="9">
          <div class="step active" :class="{active: active==0}">
            <van-icon :name="icon1" /> 验证手机号码
          </div>
        </van-col>
        <van-col span="6">
          <div class="step line">
            <van-divider dashed :style="{ color: color, borderColor: color}" :hairline="false" style="position: relative; right: -3px;"/>
          </div>
        </van-col>
        <van-col span="9">
          <div class="step">
            <van-icon v-if="active==1" :name="icon1" />
            <div v-else class="dotted" />
            设置新密码
          </div>
        </van-col>
      </van-row>
    </div>
    <van-form v-if="active==0" ref="form1" class="form" @submit="onSubmit">
      <van-field class="phone" v-model="obj.phoneNumber" name="phoneNumber" label="" placeholder="请输入手机号码" :rules="[{ required: true, validator:validPhoneNum, message: '' }]" />
      <van-field class="yzm" v-model="obj.verifyCode" name="verifyCode" label="" placeholder="请输入短信验证码" :rules="[{ required: true, message: '' }]">
        <template #right-icon>
          <div class="sendcode" @click="sendPhoneCode">
            {{ msg }}
          </div>
        </template>
      </van-field>
      <div class="submit-btn">
        <van-button block type="info" color="#37B5B5" native-type="submit" size="large" :loading="loading" loading-text="下一步">下一步</van-button>
      </div>
    </van-form>
    <van-form v-if="active==1" ref="form2" class="form" @submit="onSubmit1">
      <van-field class="old" v-model="obj.password" type="password" name="password" label="" placeholder="请设置6-20位新的登录密码" :rules="[{ required: true, validator:validPassword, message: '' }]" />
      <van-field class="new" v-model="obj.rePassword	" type="password" name="rePassword" label="" placeholder="请再次输入新的登录密码" :rules="[{ required: true,validator, message: '' }]" />
      <div class="submit-btn">
        <van-button block type="info" color="#37B5B5" native-type="submit" size="large" :loading="loading" loading-text="提交中...">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Button, Col, Field, Form, Icon, Row, Divider, Toast  } from 'vant'
import icon1 from '@/assets/img/forgetPassword/icon1.png'
import lineIcon from '@/assets/img/forgetPassword/line-icon.png'
import { postHandle, getHandle } from "@/api";
import crypto from "crypto";
import { getValue, setValue, setObject, clear } from "@/utils/auth";
// import { userService as user } from '@/services'
// import {checkVerifyCodeForGetPassword, updatePasswordByPhoneNumber} from '../../services/user'
export default {
  name: 'ResetPassword',
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    [Divider.name]: Divider
  },
  data() {
    return {
      icon1,
      lineIcon,
      loading: false,
      username: null,
      msg: '获取验证码',
      active: 0,
      obj: {
        phoneNumber: null,
        verifyCode: null,
        password: null,
        rePassword: null
      }
    }
  },
  computed: {
    color() {
      let color = '#DDDDDD'
      if (this.active == 1) {
        color = '#37B5B5'
      }
      return color
    }
  },
  methods: {
    // 校验新密码位数
    validPassword(val) {
      var reg = /^[0-9a-zA-Z]{6,20}$/
      if(reg.test(val)) return true
      Toast.fail('请设置6到20位密码长度');
      return false
    },
    // 校验手机号码格式正确性
    validPhoneNum(val) {
      var reg = /^((\+?86)|(\(\+86\)))?(1[0-9]{10})$/
      if(reg.test(val)) return true
      Toast.fail('手机号码格式不正确!');
      return false
    },
    sendPhoneCode() {
      console.log(this.$refs)
      this.$refs.form1.validate('phoneNumber').then(res => {
        console.log(1111111);
        let n = 60
        if (!res) {
          const inter = setInterval(() => {
            this.msg = `已发送${n}秒`
            n--
            if (n == 0) {
              clearInterval(inter)
              this.msg = `获取验证码`
            }
          }, 1000)
          //  手机号码sha1加密
          var sha1 = crypto.createHash('sha1')
          sha1.update(this.obj.phoneNumber.split("").reverse().join(""))
          const phoneNumber_sha = sha1.digest('hex')
          const params = {
            tenantCode: 'T000010',
            phoneNumber: this.obj.phoneNumber,
            sign: phoneNumber_sha.substring(10,20)
          }
          postHandle('/agri/api/common/tenant/sendVerifyCodeForGetPassword', params).then(res => {
            console.log(res)
          })
        }
      })
    },
    onSubmit() {
      this.loading = true
      const params = {
        tenantCode: 'T000010',
        phoneNumber: this.obj.phoneNumber,
        verifyCode: this.obj.verifyCode
      }
      postHandle('/agri/api/common/tenant/checkVerifyCodeForGetPassword', params).then(res => {
        console.log(res);
        if(res.status !== 0) {
          Toast.fail('验证码错误')
          this.loading = false
          return
        }
        this.active = 1
        this.loading = false
      })
    },
    validator(val) {
      if (val === this.obj.password) {
        return true
      } else {
        Toast.fail('两次输入的密码不一致!')
        return false
      }
    },
    onSubmit1() {
      this.loading = true
      var sha1 = crypto.createHash('sha1')
      sha1.update(this.obj.password)
      const password_sha = sha1.digest('hex')
      const params = {
        tenantCode: 'T000010',
        phoneNumber: this.obj.phoneNumber,
        password: password_sha
      }
      postHandle('/agri/api/common/tenant/updatePasswordByPhoneNumber' ,params).then(res => {
        if(res.status !== 0) {
          Toast.fail('操作失败!')
          this.loading = false
        }
        Toast('操作成功')
        this.loading = false
        clear()
       this.$bridge.call('base.closePage')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.resetpassword {
  height: 100vh;
  background: #F7F7F7;
  .progress {
    align-items:center;
    //background-color: #FFFFFF;
    padding: 0 16px;
    .van-row {
      .step {
        text-align: center;
        font-size: 16px;
        color: #999999;
        line-height: 30px;
        height: 50px;
        display: flex;
        justify-content:center;
        align-items:center;
        i{
          margin-right: 10px;
        }
        .dotted {
          margin-right: 10px;
          width: 6px;
          height: 6px;
          background: #DDDDDD;
          border-radius: 50%;
        }
      }
      .van-divider {
        width: 60px;
      }
      .active {
        color: #1B1B1B;
      }
    }
  }
  .form {
    .van-cell {
      line-height: 30px;
      padding: 10px 20px
    }
    .van-cell::after {
      border-bottom: 1px solid #DDDDDD;
      right: 0;
      left: 0;
    }
   .sendcode {
      font-size: 14px;
      color: #37B5B5;
    }
  }
  .submit-btn {
    margin: 40px 30px
  }
}
div.yzm.van-cell.van-field,div.new.van-cell.van-field{
  height: 55px;
}
div.phone.van-cell.van-field,div.old.van-cell.van-field{
  height: 55px;
}
div.yzm.van-cell.van-field::after,div.new.van-cell.van-field::after{
  width: 345px;
  border-bottom: none ;
  right: 15px;
  left: 15px;
}
div.phone.van-cell.van-field::after,div.old.van-cell.van-field::after{
  width: 345px;
  border-bottom: 1px solid #eee;
  right: 15px;
  left: 15px;
}
::v-deep .van-field__body {
  height: 35px !important;
  line-height: 35px !important;
}
</style>
